@extends('users.app')
@section('title', '用户历史数据')
@section('style')
<link rel="stylesheet" type="text/css" href="/assets/plugins/datepicker/css/tempusdominus-bootstrap-4.min.css">
@stop
@section('content')
  <div class="col-md-10 offset-md-1">
    <div class="card ">
      <div class="card-header">
        <h1>
          用户历史数据
        </h1>
        @if ($member)
          <form method="GET" action="{{ route('view_counts.index', $member->id )}}">
          @else
          <form method="GET" action="{{ route('view_counts.index')}}">
          @endif
        <div class="row">
        <div class="col-sm-6 col-md-3">
            <div class="form-group">
                <div class="input-group date" id="datetimepicker" data-target-input="nearest">
                    <div class="input-group-prepend">
                      <div class="input-group-text">起始日期</div>
                    </div>
                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker" name="date" value="{{ Request::input('date') }}" />
                    <div class="input-group-append" data-target="#datetimepicker" data-toggle="datetimepicker">
                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-6 col-md-3">
            <div class="form-group">
                <div class="input-group date" id="datetimepicker_end" data-target-input="nearest">
                    <div class="input-group-prepend">
                      <div class="input-group-text">结束日期</div>
                    </div>
                    <input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker_end" name="date_end" value="{{ Request::input('date_end') }}"/>
                    <div class="input-group-append" data-target="#datetimepicker_end" data-toggle="datetimepicker_end">
                        <div class="input-group-text"><i class="fa fa-calendar"></i></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-10 offset-sm-1 col-md-3 offset-md-0">
          <div class="form-group text-righ">
            <button type="submit" class="btn btn-common">查看</button>
          </div>
        </div>
      </div>
      </form>
      <div class="card-body">
        @if($view_counts->count() > 0)
          <table class="table table-sm table-striped">
            <thead>
              <tr>
                <th class="text-xs-center">#</th>
                <th>用户ID</th>
                <th>用户名</th>
                <th>日期</th>
                <th>页面访问量</th>
              </tr>
            </thead>
            <tbody>
              @foreach($view_counts as $view_count)
              <tr>
                <td class="text-xs-center"><strong>{{ $view_count->id }}</strong></td>

                <td>{{ $view_count->user_id }}</td>
                <td>
                  @if($view_count->user->hasSuperior())
                    {{ $view_count->user->parent->name }} -->
                  @endif
                  <a href="{{ route('view_counts.index', $view_count->user->id) }}">
                    {{ $view_count->user->name }}
                  </a>
                </td>
                <td><a href="?date={{ $view_count->date }}">{{ $view_count->date }}</a></td>
                <td>{{ $view_count->counts }}</td>
              </tr>
              @endforeach
            </tbody>
          </table>
          {!! $view_counts->appends(Request::except('page'))->render() !!}
        @else
          <h3 class="text-xs-center alert alert-info">Empty!</h3>
        @endif
      </div>
    </div>
  </div>

@endsection

@section('script')
<script src="/assets/plugins/moment/moment-2.24.0.js"></script>
<script src="/assets/plugins/datepicker/js/tempusdominus-bootstrap-4.min.js"></script>
<script>
  $(function () {
        $('#datetimepicker').datetimepicker({
          format: 'YYYY-MM-DD',
          allowInputToggle: true,
          maxDate: '{{ date('Y-m-d') }}',
          @if (Request::input('date'))
          useCurrent: false,
          defaultDate: '{{ Request::input('date') }}'
          @endif
        });
        $('#datetimepicker_end').datetimepicker({
          format: 'YYYY-MM-DD',
          allowInputToggle: true,
          maxDate: '{{date('Y-m-d')}}',
          @if (Request::input('date_end'))
          useCurrent: false,
          defaultDate: '{{Request::input('date_end')}}'
          @endif
        });
        $('#datetimepicker').on('change.datetimepicker', function(e){
          $('#datetimepicker_end').datetimepicker('minDate', e.date);
        });
        $('#datetimepicker_end').on('change.datetimepicker', function(e){
          $('#datetimepicker').datetimepicker('maxDate', e.date);
        });
    });
</script>
@stop
